<template>
  <div>
    <h1>TEST 组件</h1>
    <button @click="changeColor">切换颜色</button>

    <div class="box" :style="{ backgroundColor: bgColor }"></div>
  </div>
</template>

<script>
import { animate } from 'popmotion'

export default {
  name: 'Test',
  data() {
    return {
      bgColor: '#fff'
    }
  },
  methods: {
    changeColor() {
      animate({
        from: '#42A5F5',
        to: '#ff0000',
        duration: 1000,
        onUpdate: val => {
          console.log(val)
          this.bgColor = val
        }
      })
    }
  }
}
</script>

<style>
.box {
  width: 200px;
  height: 200px;
}
</style>
